<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
</head>
<body>
    <div id="app">
        <button @click="change">修改颜色</button>
        <!-- 在元素或者组件中 设置ref 属性 设置引用标记 , 设置完了可以在对应的父组件中通过$refs属性来引用 -->
        <h1 id="title" ref="abc">啊哈哈哈哈啊哈哈哈哈</h1>
        <btn ref="hhh"></btn>
    </div> 

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../lib/vue.js"></script>
    <script>
        //ref 其实就是提供一种间接操作DOM (组件) 的方式
        Vue.component('btn' , {
            template:`<button @click="add">按钮 - {{$parent.num}}</button>`,
            data(){
               return {
                count:100
               }
            },
            methods:{
                add(){

                }
            }
        })
    

        //vm 就是根组件
        let vm = new Vue({
            el:"#app",//指定Vue挂载的DOM
            data:{//当前vue实例中使用的数据

            },
            methods:{//当前Vue实例中使用到的方法
                change(){
                    //以前做法 :
                    // document.getElementById("title").style.color="red";
                    console.log(this.$refs.hhh.count);    //获取ref引用的组件 
                    // this.$refs.abc.style.color = "red"; //使用ref 引用实现DOM操作
                }
            }
        })
    </script>
</body>
</html>